<template>
	<div>
		<zh-form ref="bannerFormRef" :span="24" :model="state.form" :rules="state.rules">
			<zh-form-input prop="title" :disabled="props.showFlag" label="标题" placeholder="请输入轮播图标题" v-model="state.form.title"></zh-form-input>
			<zh-form-select
				:disabled="props.showFlag"
				prop="bannerStatus"
				label="有效状态"
				:options="state.statusDictData"
				placeholder="请选择"
				v-model="state.form.bannerStatus"
			></zh-form-select>
			<zh-form-select prop="bannerType" label="轮播类型" :options="state.dictData.bannerType" v-model="state.form.bannerType"></zh-form-select>
			<zh-form-select prop="type" label="文件类型" :options="state.typeDictData" v-model="state.form.type"></zh-form-select>
			<zh-form-upload
				v-if="state.form.type === 'image'"
				prop="url"
				label="图片"
				:span="24"
				type="picture"
				fileClassCode="98"
				:limit="1"
				returnType="url"
				fileTypes="png,jpg,jpeg,svg,gif"
				limitDesc="上传文件类型仅限png,jpg,jpeg,svg,gif"
				v-model="state.form.url"
			></zh-form-upload>
			<zh-form-upload
				prop="url"
				label="视频"
				type="file"
				returnType="url"
				v-if="state.form.type === 'video'"
				:limit="1"
				fileTypes="avi,wmv,mpg,mpeg,mov,rm,ram,swf,flv,mp4"
				limitDesc="上传文件类型仅限avi,wmv,mpg,mpeg,mov,rm,ram,swf,flv,mp4"
				v-model="state.form.url"
			></zh-form-upload>
			<zh-form-upload
				prop="videoImg"
				label="视频图片"
				v-if="state.form.type === 'video'"
				type="picture"
				:limit="1"
				returnType="url"
				fileTypes="png,jpg,jpeg,svg"
				limitDesc="上传文件类型仅限png,jpg,jpeg,svg,gif"
				v-model="state.form.videoImg"
			></zh-form-upload>
			<zh-form-select
				prop="appId"
				:lazy="true"
				:disabled="props.showFlag"
				label="所属应用"
				v-model="state.form.appId"
				:fieldNames="{ label: 'appName', value: 'appId' }"
				funcCode="application0012"
				searchField="appName"
			></zh-form-select>
			<zh-form-choose-org :disabled="props.showFlag" prop="orgId" label="所属组织" v-model="state.form.orgId"></zh-form-choose-org>
			<zh-form-cascader
				prop="areaCode"
				label="行政区划"
				placeholder="请选择"
				:props="{ checkStrictly: true, emitPath: false }"
				v-model="state.form.areaCode"
				:disabled="props.showFlag"
				:options="state.areaCodeSelectTreeData"
			></zh-form-cascader>
			<zh-form-select prop="linkType" label="链接类型" :options="state.dictData.linkType" v-model="state.form.linkType"></zh-form-select>
			<zh-form-input
				prop="linkUrl"
				:disabled="props.showFlag"
				label="链接地址"
				placeholder="请输入链接地址"
				v-model="state.form.linkUrl"
			></zh-form-input>
			<zh-form-input
				prop="linkName"
				:disabled="props.showFlag"
				label="内部路由名"
				placeholder="请输入内部路由名"
				v-model="state.form.linkName"
			></zh-form-input>
			<zh-form-input
				prop="linkPath"
				:disabled="props.showFlag"
				label="内部路由路径"
				placeholder="请输入内部路由路径"
				v-model="state.form.linkPath"
			></zh-form-input>
			<zh-form-input
				prop="linkParams"
				:rows="2"
				type="textarea"
				:disabled="props.showFlag"
				label="链接参数"
				placeholder="请输入链接参数"
				v-model="state.form.linkParams"
			></zh-form-input>

			<zh-form-input
				:disabled="props.showFlag"
				:span="24"
				:rows="4"
				prop="remarks"
				type="textarea"
				label="备注"
				v-model="state.form.remarks"
			></zh-form-input>
		</zh-form>
	</div>
</template>
<script lang="ts" setup name="BannerForm">
import { ElMessage } from 'element-plus';
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	bannerInfo: {
		type: Object,
		default: () => {},
		required: false,
	},
	showFlag: {
		type: Boolean,
		default: false,
	},
	modelValue: Boolean,
});
//------------------定义子组件---------------------------
const bannerFormRef = ref();
const emit = defineEmits(['update:modelValue']);
//------------------内部变量定义-------------------------
const state = reactive({
	form: { bannerStatus: '1', type: 'image', bannerType: '' } as any,
	rules: {
		title: [
			{
				required: true,
				message: '请输入轮播标题',
				trigger: 'blur',
			},
		],
		bannerStatus: [
			{
				required: true,
				message: '请选择有效状态',
				trigger: 'blur',
			},
		],
		bannerType: [
			{
				required: true,
				message: '请选择轮播类型',
				trigger: 'blur',
			},
		],
    appId: [
			{
				required: true,
				message: '请选择所属应用',
				trigger: 'blur',
			},
		],
		type: [
			{
				required: true,
				message: '请选择轮播文件类型',
				trigger: 'blur',
			},
		],
		url: [
			{
				required: true,
				message: '请上传轮播文件',
				trigger: 'blur',
			},
		],
	},
	statusDictData: [
		{ dictKey: '1', dictValue: '有效' },
		{ dictKey: '0', dictValue: '无效' },
	],
	typeDictData: [
		{ dictKey: 'image', dictValue: '图片' },
		{ dictKey: 'video', dictValue: '视频' },
	],
	areaCodeSelectTreeData: [],
	parentSelectTreeData: [],
	codeDisabled: false,
	dictData: {} as any,
});
//------------------定义调用方法-------------------------
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			state.areaCodeSelectTreeData = res.result;
		});
	}, 20);
}

async function save() {
	//校验表单
	let checkFlag = await bannerFormRef.value.checkForm();
	if (checkFlag) {
		const info = state.form;
		let ret = null as any;
		if (info.bannerId) {
			ret = await $api.common.send.post('banner0005', info);
			ret.saveType = 'edit';
			if (ret.code === 0) {
				ElMessage.success('修改成功！');
				emit('update:modelValue', false);
			}
		} else {
			ret = await $api.common.send.post('banner0004', info);
			ret.saveType = 'add';
			if (ret.code === 0) {
				ElMessage.success('新建成功！');
				emit('update:modelValue', false);
			}
		}
		return ret;
	}
	return null;
}
//------------------初始化------------------------------
onMounted(() => {
	getAreaCodeData();
});
if (props.bannerInfo) {
	console.log(props.bannerInfo);
	state.form = Object.assign({ bannerStatus: '1', type: 'image' }, props.bannerInfo);
}
const params = {
	dictFields: 'linkType,bannerType',
};
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});
//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ form: state.form, save });
</script>
<style lang="scss" scoped></style>
